<template>
   <div >
         <ul >
            <li :class="{ li2: isActive}"  v-for="(el,index) in this.$store.state.allarr" :key="index" @click="shanhcu($event)" :id="index">{{el}}</li>
        </ul>
   </div>
</template>

<script>
export default {
    data() {
        return {
           isActive:false
        }
    },
     methods: {
     shanhcu(e){
         console.log(e.target.innerHTML);
         e.target.style.textDecoration="line-through"
         this.$store.state.finishedarr.push(e.target.innerHTML)


            // this.$store.state.allarr.forEach(el => {
            //     console.log(el);
            //     el.textDecoration="line-through;"
        //   });
      },
     },
     updated(){
         console.log(111111);
            for(let index = 0; index <this.$store.state.allarr.length; index++) {
               for (let index2 = 0; index2 < this.$store.state.finishedarr.length; index2++) {
                   if(this.$store.state.allarr[index]==this.$store.state.finishedarr[index2]){
                       this.$store.state.allarr[index].style.textDecoration="line-through;"
                   }
                   
               }
               
           }
     },
}
</script>

<style scoped>
 .li2 {
    text-decoration: line-through;
 }
</style>